<template>
  <div class="remind-wrap">
    <div>
      <tinymce ref="editor" :height="500" v-model="content"/>
    </div>
    <el-row class="row">
      <el-button type="primary" @click="handleSubmit">确认</el-button>
      <el-button plain @click="handleReset">重置</el-button>
    </el-row>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { updateStyle } from '@/api/data'
export default {
  name: 'BasicRemind',
  components: {
    Tinymce
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleSubmit() {
      if (this.content.trim() === '') return false
      this.fixStyle()
    },
    fixStyle() {
      const id = 'a213b32893e04f2aa2762f54496438d1'
      const title = '交易提醒'
      const { content } = this
      updateStyle(title, content, id)
        .then((res) => {
          this.$message.success({
            message: '修改成功',
            duration: 1000
          })
        }).catch((e) => {
          this.$message.success({
            message: '请稍后再试',
            duration: 2000
          })
        })
    },
    handleReset() {
      this.content = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.remind-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .row {
    padding-top: 20px;
  }
}
</style>
